﻿<Window x:Class="SearchBoxSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SearchBoxSample"
        Title="MainWindow" Height="350" Width="525" Background="{DynamicResource Window.Background}">
    
    <Window.Resources>
        <LinearGradientBrush x:Key="Button.BackgroundTouch" StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="#FFAD499C" Offset="0.996" />
            <GradientStop Color="#FF79256B" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="Control.Border" Color="#FF79256B" />
        <SolidColorBrush x:Key="ContentControl.Background" Color="WhiteSmoke" />
        <SolidColorBrush x:Key="ContentControl.Border" Color="#FFAEB4BA" />
        <SolidColorBrush x:Key="Button.Foreground" Color="White" />
        <LinearGradientBrush x:Key="Window.Background" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF8F8F8" Offset="0.15" />
            <GradientStop Color="#FFE9E9E9" Offset="0.75" />
        </LinearGradientBrush>

        <Style TargetType="{x:Type local:SearchBox}" x:Key="SearchBoxTouchStyle">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Background" Value="{DynamicResource ContentControl.Background}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ContentControl.Border}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Width" Value="Auto" />
            <Setter Property="Tag" Value="Closed" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:SearchBox}">                        
                        <Grid x:Name="grid" Width="32" ClipToBounds="False">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ValidationStates" />
                            </VisualStateManager.VisualStateGroups>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Border x:Name="shadow" Grid.ColumnSpan="2" CornerRadius="0"
                                    Background="White" Height="32" >
                                <Border.Effect>
                                    <DropShadowEffect Opacity="0.3" BlurRadius="5" Direction="285" ShadowDepth="2" />
                                </Border.Effect>
                            </Border>
                            
                            <Border Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}" Height="32" />

                            <Path x:Name="SearchIcon" IsHitTestVisible="False" Grid.Column="1"
                                  Stroke="#FF6C621F" 
                                  StrokeThickness="1.5" Width="16" Height="14" Stretch="None"
                                  HorizontalAlignment="Left" VerticalAlignment="Center" Margin="6 0">
                                <Path.Data>
                                    <GeometryGroup>
                                        <EllipseGeometry RadiusX="4.5" RadiusY="4.5" Center="6 6" />
                                        <LineGeometry StartPoint="8 9" EndPoint="11 13" />
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>

                            <Border x:Name="border" Grid.ColumnSpan="2" CornerRadius="0"
                                    Background="{DynamicResource Button.BackgroundTouch}" 
								    BorderBrush="{DynamicResource Control.Border}" 
                                    BorderThickness="1" Height="32" Width="32" HorizontalAlignment="Right">
                                <Grid>
                                    <Rectangle x:Name="rectangle" Stroke="#4CFFFFFF" Fill="#00000000" />
                                    <Path x:Name="SearchIcon1" IsHitTestVisible="False" Grid.Column="0"
                                          Stroke="{DynamicResource Button.Foreground}" 
                                          StrokeThickness="1.5" Width="14" Height="14"
                                          Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <Path.Data>
                                            <GeometryGroup>
                                                <EllipseGeometry RadiusX="4.5" RadiusY="4.5" Center="6 6" />
                                                <LineGeometry StartPoint="8 9" EndPoint="11 13" />
                                            </GeometryGroup>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </Border>

                            <TextBox x:Name="PART_SearchBox" VerticalAlignment="Stretch" VerticalContentAlignment="Center"
                                     HorizontalContentAlignment="Left"
                                     Background="Transparent"  Cursor="Arrow" Grid.ColumnSpan="2"
                                     Text="{Binding SearchText,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent},UpdateSourceTrigger=PropertyChanged}"
                                     BorderBrush="{x:Null}"/>
                        </Grid>
                        
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter TargetName="rectangle" Property="Fill" Value="#19FFFFFF" />
                            </Trigger>

                            <Trigger Property="IsOpen" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                                           Storyboard.TargetName="grid">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="32" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="220">
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <QuarticEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                           Storyboard.TargetName="border">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <CircleEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                           Storyboard.TargetName="shadow">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <CircleEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" 
                                                                           Storyboard.TargetName="PART_SearchBox">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Cursor>IBeam</Cursor>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            
                                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Padding)" 
                                                                              Storyboard.TargetName="PART_SearchBox">
                                                <EasingThicknessKeyFrame KeyTime="0" Value="8,0" />
                                            </ThicknessAnimationUsingKeyFrames>

                                            <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" 
                                                                          Storyboard.TargetName="PART_SearchBox">
                                                <EasingInt32KeyFrame KeyTime="0" Value="1" />
                                            </Int32AnimationUsingKeyFrames>

                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                   Storyboard.TargetName="border">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" >
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <CircleEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                   Storyboard.TargetName="shadow">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" >
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <CircleEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" 
                                                                   Storyboard.TargetName="grid">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="220" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="32" >
                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                        <CubicEase EasingMode="EaseOut" />
                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                </EasingDoubleKeyFrame>
                                            </DoubleAnimationUsingKeyFrames>
                                            <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" 
                                                                  Storyboard.TargetName="PART_SearchBox">
                                                <EasingInt32KeyFrame KeyTime="0" Value="2" />
                                            </Int32AnimationUsingKeyFrames>
                                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Padding)" 
                                                                      Storyboard.TargetName="PART_SearchBox">
                                                <EasingThicknessKeyFrame KeyTime="0" Value="0" />
                                            </ThicknessAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" 
                                                                   Storyboard.TargetName="PART_SearchBox">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Cursor>Arrow</Cursor>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
    </Window.Resources>
    
    <Grid Width="222">
        <local:SearchBox BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Center"
                         Style="{StaticResource SearchBoxTouchStyle}"/>
    </Grid>
</Window>
